<div class="dlg-container">
    <h1 mat-dialog-title style="display:inline-block;cursor:move;" mat-dialog-draggable>{{'dlg.setup-title' | translate}}</h1>
    <mat-icon (click)="onNoClick()" class="dialog-close-btn" >clear</mat-icon>
    <div mat-dialog-content>
        <div class="separator">
            <div class="separator-line" style="position:absolute;left: 0px"></div>
            <div class="separator-text">
                {{'dlg.setup-gui' | translate}}
            </div>
            <div class="separator-line" style="position:absolute;right: 0px"></div>
        </div>
        <div class="btn-cards">
            <div class="btn-card">
                <button mat-button (click)="goTo('/editor')" class="card-btn">
                    <div class="card-btn-content">
                        <mat-icon>dashboard</mat-icon>
                        <span>{{'dlg.setup-views' | translate}}</span>
                    </div>
                </button>
            </div>
            <div class="btn-card">
                <button mat-button (click)="onChartConfig()" class="card-btn">
                    <div class="card-btn-content">
                        <mat-icon>multiline_chart</mat-icon>
                        <span>{{'dlg.setup-line-charts' | translate}}</span>
                    </div>
                </button>
            </div>
            <div class="btn-card">
                <button mat-button (click)="onLayoutConfig()" class="card-btn">
                    <div class="card-btn-content">
                        <mat-icon>view_compact</mat-icon>
                        <span>{{'dlg.setup-layout' | translate}}</span>
                    </div>
                </button>
            </div>
            <div class="btn-card">
                <button mat-button (click)="onGraphConfig('bar')" class="card-btn">
                    <div class="card-btn-content">
                        <mat-icon>insert_chart</mat-icon>
                        <span>{{'dlg.setup-bar-charts' | translate}}</span>
                    </div>
                </button>
            </div>
        </div>
        <div class="separator">
            <div class="separator-line" style="position:absolute;left: 0px"></div>
            <div class="separator-text">
                {{'dlg.setup-diverse' | translate}}
            </div>
            <div class="separator-line" style="position:absolute;right: 0px"></div>
        </div>
        <div class="btn-cards">
            <div class="btn-card">
                <button mat-button (click)="goTo('/device')" class="card-btn">
                    <div class="card-btn-content">
                        <mat-icon>device_hub</mat-icon>
                        <span>{{'dlg.setup-connections' | translate}}</span>
                    </div>
                </button>
            </div>
            <div class="btn-card">
                <button mat-button (click)="goTo('/users')" class="card-btn" [disabled]="isToDisable('users')">
                    <div class="card-btn-content">
                        <mat-icon>people</mat-icon>
                        <span>{{'dlg.setup-users' | translate}}</span>
                    </div>
                </button>
            </div>
            <div class="btn-card">
                <button mat-button (click)="onPlugins()" class="card-btn" [disabled]="isToDisable('plugins')">
                    <div class="card-btn-content">
                        <mat-icon>extension</mat-icon>
                        <span>{{'dlg.setup-plugins' | translate}}</span>
                    </div>
                </button>
            </div>
            <div class="btn-card">
                <button mat-button (click)="onSettings()" class="card-btn">
                    <div class="card-btn-content">
                        <mat-icon>settings</mat-icon>
                        <span>{{'dlg.setup-settings' | translate}}</span>
                    </div>
                </button>
            </div>            
        </div>        
        <div class="separator">
            <div class="separator-line" style="position:absolute;left: 0px"></div>
            <div class="separator-text">
                {{'dlg.setup-logic' | translate}}
            </div>
            <div class="separator-line" style="position:absolute;right: 0px"></div>
        </div>
        <div class="btn-cards">
            <div class="btn-card">
                <button mat-button (click)="goTo('/messages')" class="card-btn" [disabled]="isToDisable('messages')">
                    <div class="card-btn-content">
                        <mat-icon>warning</mat-icon>
                        <span>{{'dlg.setup-alarms' | translate}}</span>
                    </div>
                </button>
            </div>
            <div class="btn-card">
                <button mat-button (click)="goTo('/notifications')" class="card-btn" [disabled]="isToDisable('notifications')">
                    <div class="card-btn-content">
                        <mat-icon>notifications_none</mat-icon>
                        <span>{{'dlg.setup-notifications' | translate}}</span>
                    </div>
                </button>
            </div>
            <div class="btn-card">
                <button mat-button (click)="goTo('/scripts')" class="card-btn" [disabled]="isToDisable('scripts')">
                    <div class="card-btn-content">
                        <mat-icon>code</mat-icon>
                        <span>{{'dlg.setup-scripts' | translate}}</span>
                    </div>
                </button>
            </div>
            <div class="btn-card">
                <button mat-button (click)="goTo('/reports')" class="card-btn" [disabled]="isToDisable('reports')">
                    <div class="card-btn-content">
                        <mat-icon>content_paste</mat-icon>
                        <span>{{'dlg.setup-reports' | translate}}</span>
                    </div>
                </button>
            </div>
        </div>
        <div class="separator">
            <div class="separator-line" style="position:absolute;left: 0px"></div>
            <div class="separator-text">
                {{'dlg.setup-system' | translate}}
            </div>
            <div class="separator-line" style="position:absolute;right: 0px"></div>
        </div>
        <div class="btn-cards">
            <div class="btn-card">
                <button mat-button (click)="goTo('/events')" class="card-btn" [disabled]="isToDisable('events')">
                    <div class="card-btn-content">
                        <mat-icon>assignment</mat-icon>
                        <span>{{'dlg.setup-logs' | translate}}</span>
                    </div>
                </button>
            </div>
        </div>
    </div>
</div>